import React, { Component } from 'react'
import Header from '../components/Common/Header'
import Axios from 'axios';
import { connect } from 'react-redux';
import { collect_action, qxcollect_action, addgwc_action, qjssp_action } from '../store/store';
import { Toast } from 'antd-mobile'
import Gwc from './Gwc';
class Shop extends Component {
    constructor() {
        super();
        this.state = {
            goodlist: [],
            oIndex: 0,
            showgwc: false,
        };
    }
    componentDidMount() {
        Axios.get('/goodlist').then(res => {
            this.setState({
                goodlist: res.data.list
            })
        })
    }
    iClick = (index) => {
        this.setState({
            oIndex: index
        })
    }
    tcclick = () => {
        this.setState({ showgwc: false })
    }
    render() {
        return (
            <div className="shop">
                <Header
                    back={<span onClick={() => { this.props.history.push({ pathname: '/home' }) }}>&lt;</span>}
                    open={
                        this.props.sclist.find(item => {
                            return item.id === this.props.history.location.state.id
                        })
                            ?
                            <span onClick={() => { this.props.qxcollect(this.props.history.location.state); Toast.success('已取消收藏', 1) }}>★</span>
                            :
                            <span onClick={() => { this.props.collect(this.props.history.location.state); Toast.success('已收藏', 1) }}>☆</span>
                    }
                    title={this.props.history.location.state.title}>
                </Header>
                <div className="imgs"></div>
                <div className="content">
                    <div className="nav">
                        {
                            this.state.goodlist.map((item, index) => {
                                return (
                                    <div className={this.state.oIndex === index ? "item active" : 'item'} key={index} onClick={() => { this.iClick(index) }}>
                                        {item.title}
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="list">
                        {
                            this.state.goodlist.length > 0 &&
                            this.state.goodlist[this.state.oIndex].content.map((item, index) => {
                                return (
                                    <div className="item" key={index}>
                                        <div className="img">
                                            <img src={item.pic} alt="" /></div>
                                        <div className="text">
                                            <h4 className="name">{item.name}</h4>
                                            <div className="title">{item.title}</div>
                                            <div className="price">￥：{item.price}</div>
                                        </div>
                                        {
                                            this.props.gwclist.find(it => {
                                                return it.id === item.id
                                            }) ? '' : <h1 className="btn" onClick={() => {
                                                this.props.addgwc(item)
                                            }}>+</h1>
                                        }

                                    </div>
                                )
                            })
                        }

                    </div>
                </div>
                <div className="foot">
                    <div onClick={() => { this.setState({ showgwc: true }) }}>购物车</div>
                    <div>总价：{
                        this.props.gwclist.length > 0
                            ?
                            this.props.gwclist.reduce((a, b) => {
                                return a + b.count * b.price
                            }, 0)
                            :
                            '0'
                    }元</div>
                    <div onClick={() => { this.props.qjs(this.props.gwclist); this.props.history.push({ pathname: '/gmsp' }) }}>去结算</div>
                </div>
                {/*  this.state.showgwc为true时显示购物车组件 */}
                {
                    this.state.showgwc && <Gwc tcclick={this.tcclick}></Gwc>
                }
            </div>
        )
    }
}
export default connect(
    (state) => {
        return {
            gwclist: state.gwclist, /* 购物车列表 */
            sclist: state.sclist    /*收藏列表  */
        }
    },
    (dispatch) => {
        return {
            collect: (item) => {
                dispatch(collect_action(item))
            },
            qxcollect: (item) => {
                dispatch(qxcollect_action(item))
            },
            addgwc: (item) => {
                dispatch(addgwc_action(item))
            },
            qjs: (item) => {
                dispatch(qjssp_action(item))
            }
        }
    }
)(Shop)